<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参考链接：https://anen.io/</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
    :root {
        --background-image-hero: conic-gradient(from 180deg at 50% 70% in oklch longer hue, oklch(14.08% 0.004 285.82), oklch(98.51% 0 0)), conic-gradient(at 50% 30% in oklch longer hue, oklch(98.51% 0 0), oklch(14.08% 0.004 285.82));
    }

    section {
        width: 500px;
        height: 300px;
        overflow: hidden;
    }

    .box {
        width: 100%;
        height: 100%;
        background-image: var(--background-image-hero);
        background-size: 100% 50%;
        background-position: 100% 0, 0 100%;
        background-repeat: no-repeat;
        animation: hero 2.7s cubic-bezier(.65, .05, .36, 1) infinite;
    }

    @keyframes hero {
        0% {
            opacity: 0;
            transform: translateY(-50%) translateX(-100%) scale(4) rotate(148deg);
        }

        100% {
            opacity: 1;
            transform: translateY(-50%);
        }

        33.33% {
            opacity: 1;
            transform: translateY(-50%) translateX(0) scale(4) rotate(148deg);
        }
    }
</style>

<body>
    <section>
        <div class='box'></div>
    </section>

</body>

</html>